<template>
    <div class="personnedata-list">
        <div class="poup-box">
            <div class="close" @click="store.changeshowUser"></div>
            <div class="title setColor">人员画像</div>
            <div class="xiaiaobox">
                <img class="xiabiao" src="../../assets/namexiabiao.png" alt="">
            </div>
            <div class="topbox">
                <div class="left">
                    <div class="userdata">
                        <div class="userleft">
                            <img src="../../assets/icon23.png" alt="">
                        </div>
                        <div class="userright">
                            <div class="heng1">张海波</div>
                            <div class="heng2">
                                年龄：<span>38</span>
                            </div>
                            <div class="heng2">
                                性别：<span>男</span>
                            </div>
                            <div class="heng2">
                                选任时间：<span>2024-02-01</span>
                            </div>
                            <div class="heng2">
                                所在行业：<span>体制内工作者</span>
                            </div>
                        </div>
                    </div>
                    <div class="uerlist">
                        <span class="text1">监督案件数量</span>
                        <span class="text2 setColor">33</span>
                    </div>
                    <div class="uerlist">
                        <span class="text1">监督意见被采纳次数</span>
                        <span class="text2 setColor">30</span>
                    </div>
                    <div class="uerlist">
                        <span class="text1">监督意见被采纳率</span>
                        <span class="text2 setColor">90%</span>
                    </div>
                </div>
                <div class="right">
                    <div class="righttop">
                        <div class="item">
                            <p class="p1">总学习时长</p>
                            <p class="p2">504.19小时</p>
                        </div>
                        <div class="item">
                            <p class="p1">累计培训次数</p>
                            <p class="p2">20次</p>
                        </div>
                        <div class="item">
                            <p class="p1">本月累计学习时长</p>
                            <p class="p2">30.12小时</p>
                        </div>
                        <div class="item">
                            <p class="p1">平均课程得分</p>
                            <p class="p2">92.68分</p>
                        </div>
                    </div>
                    <e-charts id="mycharts" ref="chart" :option="dataOption" />
                </div>
            </div>
            <div class="bottombox">
                <div class="left">
                    <span class="heng1 setColor">9.9</span>
                </div>
                <div class="right">
                    <div class="item">
                        <div class="number setColor">9.9</div>
                        <div class="titlex">学习培训</div>
                    </div>
                    <div class="item">
                        <div class="number setColor">9.9</div>
                        <div class="titlex">技能证书</div>
                    </div>
                    <div class="item">
                        <div class="number setColor">9.9</div>
                        <div class="titlex">奖惩</div>
                    </div>
                    <div class="item">
                        <div class="number setColor">9.9</div>
                        <div class="titlex">工作经历</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { useCounterStore } from '@/stores/poups'
const store = useCounterStore()
// 配置项
let dataOption = ref({});
// 初始化echarts
function initEcharts() {
    dataOption.value = {
        xAxis: {
            type: 'category',
            data: ['国家政策类', '地方政策类', '社会理论知识类']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [33, 30, 90],
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
            }
        ]
    }
}
onMounted(() => {
    initEcharts();
});
</script>

<style lang="less" scoped>
.personnedata-list {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;

    .poup-box {
        width: 1118px;
        height: 660px;
        background-image: url("../../assets/Pop-up box.png");
        background-size: 100% 100%;
        position: relative;
        box-sizing: border-box;
        padding: 0 48px;

        .close {
            width: 32px;
            height: 32px;
            background-image: url("../../assets/icon_flowpages_close.png");
            background-size: 100% 100%;
            position: absolute;
            right: 60px;
            top: 60px;
            cursor: pointer;
        }

        .title {
            width: 100%;
            margin-top: 64px;
            text-align: center;
            font-family: AlimamaShuHeiTi-Bold;
            font-weight: 700;
            font-size: 32px;
        }

        .xiaiaobox {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 10px;

            .xiabiao {
                width: 234px;
                height: 2px;
            }
        }

        .topbox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;

            .left {
                width: 289px;

                .userdata {
                    width: 289px;
                    height: 146px;
                    background-image: url("../../assets/icon22.png");
                    background-size: 100% 100%;
                    box-sizing: border-box;
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .userleft {
                        width: 88px;
                        height: 120px;

                        img {
                            width: 88px;
                            height: 120px;
                        }
                    }

                    .userright {
                        width: 289px;
                        margin-left: 12px;

                        .heng1 {
                            width: 100%;
                            height: 24px;
                            background: linear-gradient(to right, #0057A4 0%, #403EC8 100%);
                            box-sizing: border-box;
                            padding: 0 10px;
                            font-family: PingFangSC-SNaNpxibold;
                            font-weight: 600;
                            font-size: 14px;
                            color: #FFFFFF;
                        }

                        .heng2 {
                            width: 100%;
                            margin-top: 5px;
                            font-size: 12px;
                            color: #006BFF;
                            font-weight: 400;

                            span {
                                color: #FFFFFF;
                            }
                        }
                    }
                }

                .uerlist {
                    width: 100%;
                    height: 38px;
                    background-image: url("../../assets/icon24.png");
                    background-size: 100% 100%;
                    margin-top: 12px;
                    box-sizing: border-box;
                    padding: 0 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .text1 {
                        font-family: PingFangSC-SNaNpxibold;
                        font-weight: 600;
                        font-size: 14px;
                        color: #FFFFFF;
                    }

                    .text2 {
                        font-family: AlimamaShuHeiTi-Bold;
                        font-weight: bold;
                        font-size: 18px;
                    }
                }
            }

            .right {
                width: 100%;
                margin-left: 16px;
                height: 294px;
                background-image: url("../../assets/icon25.png");
                background-size: 100% 100%;
                box-sizing: border-box;
                padding: 12px;

                .righttop {
                    width: 100%;
                    height: 83px;
                    background-image: url("../../assets/icon26.png");
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;

                    .item {
                        width: calc(100% / 4);
                        height: 55px;
                        border-right: 1px solid rgba(255, 255, 255, 0.2);

                        .p1 {
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            font-size: 14px;
                            color: #ffffffcc;
                            text-align: center;
                        }

                        .p2 {
                            font-family: PingFangSC-SNaNpxibold;
                            font-weight: 600;
                            font-size: 14px;
                            color: #FFFFFF;
                            margin-top: 10px;
                            text-align: center;
                        }
                    }

                    .item:last-child {
                        border-right: none;
                    }
                }

                #mycharts {
                    width: 700px;
                    height: 280px;
                    transform: translateY(-40px);
                }
            }
        }
        .bottombox{
            width: 100%;
            height: 120px;
            background-image: url("../../assets/icon27.png");
            background-size: 100% 100%;
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                width: 214px;
                height: 126px;
                background-image: url("../../assets/icon28.png");
                background-size: 100% 100%;
                transform: translateY(-15px);
                position: relative;
                .heng1{
                    font-family: YouSheBiaoTiHei;
                    font-size: 28px;
                    position: absolute;
                    right: 70px;
                    bottom: 0px;
                    font-weight: bold;
                }
            }
            .right{
                width: calc(100% - 254px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                .item{
                    width: 134px;
                    height: 103px;
                    background-image: url("../../assets/icon29.png");
                    background-size: 100% 100%;
                    display: flex;
                    flex-wrap: wrap;
                    .number{
                        width: 100%;
                        text-align: center;
                        font-family: AlimamaShuHeiTi-Bold;
                        font-weight: bold;
                        font-size: 24px;
                        transform: translateY(5px);
                    }
                    .titlex{
                        width: 100%;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                        text-align: center;
                        transform: translateY(-20px);
                    }
                }
            }
        }
    }
}
</style>